<template>
  <view>
    <u-navbar title="职位详情" height="50" title-size="36"></u-navbar>
    <u-gap height="20" bg-color="#F0F1F2"></u-gap>
    <view class="message-box">
      <view class="top dis-flex flex-y-between flex-y-center">
        <view class="t-r dis-flex flex-y-between flex-y-center">
          <view class="status" v-if="item.status == 1">置顶中</view>
          <view class="tl">热控专业工程师</view>
        </view>
        <view class="t-l dis-flex flex-y-between flex-y-center">
          <view class="price">7-10K/月</view>
        </view>
      </view>
      <view class="label">
        <text class="text">贵阳</text>
        <text class="text">3-5年 </text>
        <text class="text">五险一金 </text>
        <text class="text">本科</text>
        <text class="text">绩效奖金 </text>
        <text class="text">年终奖</text>
      </view>
      <view class="update-at">更新于3月30日</view>
      <u-line></u-line>
      <view class="user-info dis-flex flex-y-center">
        <u-avatar src="" size="90"></u-avatar>
        <view class="user-c">
          <view class="u-c-n">
            <text class="name">夏女士</text>
            <text class="st">刚刚活跃</text>
          </view>
          <view class="zw"> 贵州红城泰达环保有限公司·人事总监 </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="c-tl">职位描述</view>
      <view class="c-c">
        岗位职责：<br />
        1. 认真贯彻执行公司和本部门的施工技术管理制度，实现 项目工程的技术管理和施工质量目标；<br />
        2. 对热控专业工程项目质量在技术上全面负责，对热控专
        业施工安全技术和环境保护技术工作负责，学习和执行公 司质量、安全及环境保护管理体系文件；<br />
        3. 参与项目工程建设总体网络进度计划编制和负责热控专 业工程项目网络进度计划的编制；<br />
        4. 参加项目工程设备的招投标工作，并负责热控专业设备 的招投标工作；<br />
        5. 参加对施工组织总设计或热控专业施工组织设计的审核
        工作，负责编制热控专业施工技术准备工作计划；<br />
        6. 负责核查及确认热控专业工程量和工程变更量；<br />
        7. 负责编写执行热控专业生产准备计划。
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        status: 1
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f0f1f2;
}
.message-box {
  height: 320rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  .top {
    margin-bottom: 18rpx;
    .t-r {
      .status {
        height: 36rpx;
        background: #ed624f;
        border-radius: 6rpx;
        line-height: 36rpx;
        font-size: 20rpx;
        color: #ffffff;
        padding: 0 10rpx;
      }
      .tl {
        margin-left: 10rpx;
        font-size: 34rpx;
        color: #333333;
        font-weight: 600;
      }
    }
    .t-l {
      .price {
        font-size: 34rpx;
        color: #10a28f;
        font-weight: 600;
        margin-right: 4rpx;
      }
    }
  }
  .label {
    margin-bottom: 18rpx;
    .text {
      height: 36rpx;
      background: #f0f0f0;
      border-radius: 5rpx;
      font-size: 26rpx;
      color: #666666;
      line-height: 36rpx;
      padding: 0 8rpx;
      margin-right: 10rpx;
    }
  }
  .update-at {
    font-size: 22rpx;
    color: #999999;
    margin-bottom: 20rpx;
  }
  .user-info {
    height: 90rpx;
    margin-top: 16rpx;

    .user-c {
      margin-left: 20rpx;
      display: flex;
      justify-content: space-between;
      flex-flow: column;
      height: 80rpx;
      .name {
        color: #333333;
        font-size: 28rpx;
        margin-right: 20rpx;
      }
      .st {
        color: #999999;
        font-size: 22rpx;
      }
    }
    .zw {
      color: #999999;
      font-size: 24rpx;
    }
  }
}
.content {
  padding: 30rpx 20rpx;
  background-color: #fff;
  .c-tl {
    font-size: 30rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 30rpx;
  }
  .c-c {
    font-size: 28rpx;
    color: #666666;
    line-height: 48rpx;
    padding-bottom: 200rpx;
  }
}
</style>
